import React, { useEffect, useState,require } from 'react';
import { Button, Search, Swiper,Toast  } from 'react-vant';
import '../css/Home.css'
import axios from '../services/index'
import BrandList from './children/BrandList';
import Channel from './children/Channel';
import NewGoodsList from './NewGoodsList';
import Swipe from './children/Swipe'
import TopSwipe from './children/TopSwipe';
import CategoryList from './children/CategoryList';
import bus from '../bus'
import { Route } from 'react-router-dom';
import SearchPopup from './children/SearchPopup';
export default function Home(props) {
    const [value, setValue] = useState('');
    const [item, setItem] = useState([])
    const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    const [banner,setBanner] = useState([])
    const [channel,setChannel] = useState([])
    const [brandList,setBrandList] = useState([])
    const [newGoodsList,setNewGoodsList] = useState([])
    const [categoryList,setCategoryList] = useState([])
    const [topicList,setTopicList] = useState([{
        item_pic_url:"https://yanxuan.nosdn.127.net/14943267735961674.jpg",
        id:123
    }])
    const [topSwipe,setTopSwipe] = useState([])
    const [images,SetImages] = useState([])
    const [showSearch,setShowSearch] = useState(false)
    const [flag,setFlag] = useState(true)
    useEffect(()=>{
        
        if(props.location.pathname==='/home'){
            const watchWin = ()=>{
                if(div1.offsetTop - document.documentElement.scrollTop-window.innerHeight<50){
                    setFlag(false)
                    document.removeEventListener('scroll',watchWin)
                }
            }
        axios.get('/index/index').then(res=>{
            if(res.errno === 0){
                setBanner(res.data.banner)
                setChannel(res.data.channel)
                setBrandList(res.data.brandList)
                setNewGoodsList(res.data.newGoodsList)
                setTopicList(res.data.topicList)
                setTopSwipe(res.data.banner)
                setCategoryList(res.data.categoryList)
            }
        })
        let div1 = document.getElementById('secondswiper')
        document.addEventListener('scroll',watchWin)
    }
        if(props.location.pathname==='/home/searchPopup'){
            setShowSearch(true)
        }
        else{
            setShowSearch(false)
        }
        return ()=>{
            document.removeEventListener('scroll',watchWin)
        }
        
    },[props.location.pathname])
    return (<div>
        
            {showSearch || (<div id='HomeContent'>
            <Search
                shape="round"
                background="#fff"
                value={value}
                onChange={setValue}
                placeholder="请输入搜索关键词"
                onClickInput={()=>{
                    setShowSearch(true)
                    props.history.push('/home/searchPopup')
                }}
            />
            <TopSwipe  topSwipe={topSwipe} />
            <Channel channel={channel} props={props} />
            <BrandList brandList={brandList}   />
            <NewGoodsList newGoodsList={newGoodsList} />
            <Swipe
            slideSize={80}
            topicList={topicList}
            
            />
            
            {   
                flag || categoryList.map(item=><CategoryList key={item.id} data={item} /> )
            }
        </div>)}
        <Route path='/home/searchPopup' component={SearchPopup}  />
        </div>
    )
}
